
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: "-apple-system","BlinkMacSystemFont","Roboto","Helvetica Neue","MIcrosoft YaHei",sans-serif !important;
    background-color: #F8F8F8;
} 

// header
header {
    background: #fff;
    box-shadow: 0 2px 27px 0 rgb(0 0 0 / 10%);

    .logo {
        transition: all 0.15s ease-out;
        -webkit-transition: all 0.15s ease-out;
        -moz-transition: all 0.15s ease-out;
        &:hover {
            transform: scale(1.07) rotate(-1deg);
            -webkit-transform: scale(1.07) rotate(-1deg);
            -moz-transform: scale(1.07) rotate(-1deg);
        }
    }

    // bar
    .bar {
        font-size: 14px;
        background: #F8F8F8;    
        .bar-content {
            width: 1190px;
            margin: 0 auto;
            height: 40px;
            display: flex;  
            justify-content: space-between;
            align-items: center;
            .city {
              cursor: pointer;
              .area {
                display: inline-block;
                position: relative;
              }

              .area .change-city {
                position: relative;
                display: inline-block;
                height: 23px;
                line-height: 23px;
                background: #fff;
                border: 1px solid #CECBCE;
                padding: 0 20px 0 4px;
              }

              .area .change-city b {
                position: absolute;
                display: inline-block;
                overflow: hidden;
                width: 17px;
                height: 24px;
                background: url(https://www.17sucai.com/preview/73083/2014-02-24/area/img/btn20121210.png) 0 0 no-repeat
              }

              .area .box {
                position: absolute;
                z-index: 9;
                border: 1px solid #cecbce;
                width: 450px;
                height: 250px;
                padding: 15px;
                background: #fff;
                -moz-box-shadow: 0 0 5px #ddd;
                -webkit-box-shadow: 0 0 5px #ddd;
                box-shadow: 0 0 5px #ddd;
                display: none;
              }

              .area .box ul.tab {
                list-style: none;
                display: flex;
                border-bottom: 2px solid #edd28b;
                margin: 0px;
                padding: 0px;
              }

              .area .box ul.tab li {
                height: 23px;
                font-size: 14px;
                padding: 2px 6px;
                border: 1px solid #ddd;
                border-bottom: 0;
                margin-right: 5px;
                background-color: #fff;
                line-height: 22px;
                text-decoration: none;
              }

              .area .box ul.tab li.cur {
                border: 2px solid #edd28b;
                border-bottom: 0;
                margin-bottom: -2px;
                height: 24px;
                display: block;
              }

              .area .box .tab-content {
                display: flex;
                flex-wrap: wrap;
                padding-top: 10px;
              }

              .area .box .tab-content .city {
                padding: 8px 6px;
                margin: 0px 5px;
              }

              .area .box .tab-content .city a {
                color: #555;
                text-decoration: none;
              }

              .area .box .tab-content .city a:hover {
                color: red;
              }

              .area .box .tab-content .city span {
                color: #555;
                font-size: 12px;
                padding: 5px;
              }


              .area .box .tab-content .city span:hover {
                color: red;
                font-weight: bold;
              }


              .area .box .tab-content .city.cur {
                background-color: #eaeaea;
              }

              .area .box .tab-content .city:hover {
                cursor: pointer;
                background-color: #eaeaea;
              }
            }
            a {
                margin: 0 5px;
                text-decoration:none;
                color: #999;
                &:nth-child(1),&:hover  {color:#FE8C00;}
            }
        }
    }

    // content
    .content {
        height: 157px;
        width: 1190px;
        margin: 30px auto 0;
        display: flex;  
        justify-content: space-between;
        // align-items: center;
        img {
            width: 126px;
            height: 48px;
        }

        .header-search-input {
            border: 1px solid #E5E5E5;
            border-right: none;
            border-radius: 4px 0 0 4px;
            line-height: 100%;
            box-sizing: border-box;
            display: inline-block !important;
            padding: 15px;
            font-size: 14px;
            height: 40px;
            background: transparent;
            width: 470px;
        }
        .header-search-input::-webkit-input-placeholder {color:#999;
        }
        .header-search-input:-ms-input-placeholder {color:#999;
        }
        .header-search-input::placeholder {color:#999;
        }
        .header-search-btn {
            outline: none;
            width: 80px;
            box-sizing: border-box;
            height: 40px;
            line-height: 40px;
            background: #FFC300;
            border: none;
            float:right;
            color: #222222;
            cursor: pointer;
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
            /* &:active {
            background: #73E1CE;
            } */
            span {font-size: 26px;}
        }
    }
}
